// 添加药品耗材  AddDepartment
import React, { useState } from "react";
import {
  Form,
  Input,
  Select,
  DatePicker,
  InputNumber,
  Button,
  Upload,
  message,
  Row,
  Col,
} from "antd";
import { fetchDrugsAdd } from "../../../request/hytApi";
import { UploadOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import "../../../styles/adddepartment.css";

const { Option } = Select;

const AddDepartment = () => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);

  // 处理文件上传
  const handleUploadChange = ({ fileList: newFileList }) =>
    setFileList(newFileList);

  // 表单提交
  const onFinish = async (values) => {
    values.starttime = values.starttime.format("YYYY-MM-DD");
    values.endtime = values.endtime.format("YYYY-MM-DD");
    values.img = "1667810069850.webp";
    const res = await fetchDrugsAdd(values);
    console.log("🚀 ~ onFinish ~ res:", res);
    if (res.code === 1) {
      message.success("添加成功！");
    }
  };

  return (
    <div style={{ padding: "10px", maxWidth: "600px" }}>
      <Form form={form} onFinish={onFinish}>
        {/* 医疗品名 */}
        <Form.Item
          label="医疗品名"
          name="name"
          rules={[{ required: true, message: "请输入医疗品名!" }]}
          labelCol={{ span: 4 }} // label 宽度
          wrapperCol={{ span: 18 }} // 输入框宽度
        >
          <Input placeholder="请输入医疗品名" />
        </Form.Item>
        {/* 医疗分类 */}
        <Form.Item
          label="医疗分类"
          name="sort"
          rules={[{ required: true, message: "请选择医疗分类!" }]}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <Select placeholder="请选择医疗分类">
            <Option value="中药">中药</Option>
            <Option value="西药">西药</Option>
            <Option value="器械">器械</Option>
          </Select>
        </Form.Item>
        {/* 医品规格 */}
        <Form.Item
          label="医品规格"
          name="type"
          rules={[{ required: true, message: "请输入医品规格!" }]}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <Input placeholder="请输入医品规格" />
        </Form.Item>

        {/* 生产日期 */}
        <Form.Item
          label="生产日期"
          name="starttime"
          rules={[{ required: true, message: "请选择生产日期!" }]}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <DatePicker
            style={{ width: "100%" }}
            format="YYYY-MM-DD"
            initialValues={dayjs()}
            placement="bottomRight"
          />
        </Form.Item>
        {/* 有效日期 */}
        <Form.Item
          label="有效日期"
          name="endtime"
          rules={[{ required: true, message: "请选择有效日期!" }]}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <DatePicker
            style={{ width: "100%" }}
            format="YYYY-MM-DD"
            initialValues={dayjs()}
            placement="bottomRight"
          />
        </Form.Item>
        {/* 入库数量 */}
        <Form.Item
          label="入库数量"
          name="count"
          rules={[{ required: true, message: "请输入入库数量!" }]}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <InputNumber
            min={1}
            style={{ width: "100%" }}
            placeholder="请输入入库数量"
          />
        </Form.Item>
        {/* 医品价格 */}
        <Form.Item
          label="医品价格"
          name="price"
          rules={[{ required: true, message: "请输入医品价格!" }]}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <InputNumber
            min={0}
            style={{ width: "100%" }}
            placeholder="请输入医品价格"
            formatter={(value) =>
              ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            }
            parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
          />
        </Form.Item>
        {/* 医疗品图 */}
        <Form.Item
          label="医疗品图"
          name="img"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <Upload
            action="/upload" // 你可以设置上传接口
            listType="picture-card"
            fileList={fileList}
            onChange={handleUploadChange}
            maxCount={1}
            beforeUpload={() => false} // 禁用自动上传
          >
            {fileList.length < 1 && <UploadOutlined />}
          </Upload>
        </Form.Item>
        {/* 按钮 */}
        <Row style={{ padding: "0 60px" }}>
          <Col>
            <Button type="primary" htmlType="submit">
              确认添加
            </Button>
          </Col>
          <Col>
            <Button
              style={{
                marginLeft: 20,
                backgroundColor: "#728cb2",
                color: "#fff",
              }}
              type="default"
              onClick={() => window.history.back()}
            >
              返回上一级
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default AddDepartment;
